<template>
	<view class="cell">
		<view class="header">
			<view class="header-top">
				<image class="icon" src="https://oss.jxhecong.com/v2/image/message_bike@2x.png"></image>
				<text class="title">{{message.title}}</text>
				<text class="time">{{message.time}}</text>
			</view>
			<view class="subTitle">{{message.content}}</view>
		</view>
		<view>
			<view class="item" v-for="(item,index) in message.details" :key="index">
				<view>{{item.key + ": "}}</view>
				<view>{{item.value}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['message']
		
	}
</script>

<style lang="scss" scoped>
	.cell{
		background-color: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		padding: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}
	.header{
		border-bottom: solid 1rpx #DCDFE6;
	}
	.header-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.icon{
			width:36rpx;
			height:36rpx;
		}
		.title{
			color: #303133;
			font-size:32rpx;
			flex:1;
			margin-left:12rpx;
		}
		.time{
			color: #606266;
			font-size: 24rpx;
		}
	}
	.subTitle{
		color: #6ABF6C;
		font-size:28rpx;
		margin-bottom:24rpx;
		margin-top:8rpx;
	}
	.item{
		display: flex;
		justify-content: flex-start;
		margin-top:20rpx;
	}
	.item>view:first-child{
		color: #909399;
		font-size: 28rpx;
		width: 144rpx;
	}
	.item>view:last-child{
		color: #303133;
		font-size: 28rpx;
	}
</style>
